<html>
<head>
    <meta charset="utf-8">
    <title>后台系统Blog</title>
    <link rel="stylesheet" type="text/css" href="statics/css/iview.css">
    <link rel="stylesheet" type="text/css" href="statics/css/index.css">
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <script type="text/javascript" src="statics/lib/vue.min.js"></script>
    <script type="text/javascript" src="statics/lib/iview.min.js"></script>
    <script type="text/javascript" src="statics/lib/jquery.min.js"></script>

</head>
<body>
<div id="app">
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, width:'250px'}" style="max-width:250px">
            <div class="logo">
                <span>后台系统Blog</span>
            </div>
            <div style="overflow: auto;height: 100%">
                <i-menu active-name="1-2" theme="dark" :open-names="['1']">

                    <div v-for="item in menuData">
                        <div v-if="item.children.length > 0">
                            <Submenu :name="item.id">
                                <template slot="title">
                                    <Icon :type="item.type"></Icon>{{item.title}}
                                </template>
                                <menu-item v-for="menu in item.children" :name="menu.id">
                                    <label @click="forwardToItem(menu,item)">{{menu.title}}</label>
                                </menu-item>
                            </Submenu>
                        </div>
                        <div v-else>
                            <menu-item name="1">
                                <Icon :type="item.type"></Icon>
                                <label @click="forwardToItem(item,item)">{{item.title}}</label>
                            </menu-item>
                        </div>
                    </div>

                    <!--<Submenu v-for="item in menuData" :name="item.id">-->
                        <!--<template slot="title">-->
                            <!--<Icon :type="item.type"></Icon>{{item.title}}-->
                        <!--</template>-->
                        <!--<menu-item v-for="menu in item.children" :name="menu.id">-->
                            <!--<label @click="forwardToItem(menu,item)">{{menu.title}}</label>-->
                        <!--</menu-item>-->
                    <!--</Submenu>-->
                </i-menu>
            </div>
        </Sider>
        <Layout :style="{marginLeft: '250px'}">
            <Header :style="{background: '#3c8dbc', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)' , height: '50px'}">
                <div class="welcomeDiv">
                    <span>欢迎，管理员</span>
                </div>
                <div class="logout">
                    <ul>
                        <li>
                            <a style="color:aliceblue" href="logout">
                                <Icon type="share"></Icon>退出系统
                            </a>
                        </li>
                    </ul>
                </div>
            </Header>
            <Content :style="{padding: '0 16px 16px'}" style="background-color: #f0f2f5; background-size: contain;
            background-image: url(statics/images/main_bg.svg)">
                <Breadcrumb :style="{margin: '5px 0'}">
                    <Icon type="home"></Icon>
                    <Breadcrumb-Item>首页</Breadcrumb-Item>
                    <Breadcrumb-Item>{{itemName}}</Breadcrumb-Item>
                    <Breadcrumb-Item>{{menuName}}</Breadcrumb-Item>
                </Breadcrumb>
                <Card>
                    <div style="height: 76%">
                        <section class="content" style="background:#fff;">
                            <iframe scrolling="no" frameborder="0" width="100%" height="100%" :src="main"></iframe>
                        </section>

                    </div>
                </Card>
            </Content>
            <Footer class="layout-footer-right">
                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2011-2016 &copy; Alennus
                </div>
            </Footer>
        </Layout>

    </div>
</div>

<script src="statics/js/index.js"></script>
</body>
</html>